<template>
  <div class="footer">
    <div class="footer-top-wrap">
      <div class="footer-top">
        <div class="footer-top-tit">友情链接</div>
        <div class="footer-top-item">
          <a target="_blank" href="https://www.weibo.com">新浪微博</a>
          <a target="_blank" href="https://v.qq.com">腾讯视频</a>
          <a target="_blank" href="https://tieba.baidu.com">百度网吧</a>
          <a target="_blank" href="https://news.sohu.com">搜狐新闻</a>
          <a target="_blank" href="https://mail.163.com">网易邮箱</a>
          <a target="_blank" href="https://www.qunar.com">去哪网儿</a>
          <a target="_blank" href="https://kankan.com">迅雷看看</a>
          <a target="_blank" href="https://youhui.pinduoduo.com">拼多多</a>
          <a target="_blank" href="https://www.toutiao.com">今日头条</a>
          <a target="_blank" href="https://ditu.amap.com">高德地图</a>
        </div>
      </div>
    </div>
    <div class="footer-con-wrap">
      <div class="footer-con">
        <div class="footer-con-logo">
          <img src="@/assets/image/footer-logo.png" alt="">
        </div>
        <div class="footer-con-about">
          <dl>
            <dt>关于我们</dt>
            <dd>大华简介</dd>
            <dd>行业动态</dd>
            <dd>推荐就业</dd>
            <dd>诚聘英才</dd>
          </dl>
           <dl>
            <dt>服务与支持</dt>
            <dd>常见问题</dd>
            <dd>投诉反馈</dd>
            <dd>人工客服</dd>
            <dd>校企合作</dd>
          </dl>
          <div class="footer-con-item">
            <p class="footer-con-t">联系我们</p>
            <p class="footer-phone">18210333691</p>
            <p class="footer-con-t">周一至周五9:00-18:00</p>
          </div>
        </div>
        <div class="footer-con-concat">
          <div class="footer-con-img">
            <img src="@/assets/image/erwei.png" alt="">
          </div>
          <span>关注公众号</span>
        </div>
      </div>
    </div>
    <div class="footer-bom-wrap">
      <div class="footer-bom">
          <span>2003-2019 TMALL.COM</span>
          <a href="https://beian.miit.gov.cn/">
          <img src="@/assets/image/qq.png" alt=""> 【 京ICP备2021018170号-1】</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  height: 372px;
  min-width: 1200px;
  .footer-top-wrap {
    width: 100%;
    height: 39px;
    background-color: #444c56;
  }
}
.footer-con-wrap {
  width: 100%;
  height: 294px;
  background-color: #323840;
  min-width: 1200px;
}
.footer-bom-wrap {
  width: 100%;
  height: 39px;
  background-color: #202429;
}
.footer-top {
  width: 1200px;
  height: 39px;
  margin: 0 auto;
  display: flex;
}
.footer-top-tit {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  height: 100%;
  line-height: 39px;
}
.footer-top-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  a {
    font-size: 14px;
    color: #ccc;
    margin-left: 35px;
    text-decoration: none;
  }
}
.footer-con{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.footer-con-logo{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.footer-con-about{
      display: flex;
      flex: 1;
      justify-content: space-between;
      padding-left: 128px;
      padding-right: 47px;
      dl{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        dt{
              font-size: 16px;
              color: #999;
              font-weight: 700;
              margin-bottom: 20px;
        }
        dd{
          font-size: 14px;
          color: #999;
          margin-bottom: 12px;
        }

      }
}
.footer-con-item{
  display: flex;
    flex-direction: column;
    color: #999;
    .footer-con-t{
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 8px;
    }
}
.footer-con-concat{
      display: flex;
    flex-direction: column;
    align-items: center;
    span{
          font-size: 14px;
    color: #656b74;
    margin-top: 12px;
    }
}
.footer-con-img{
  background-color: #656b74;
    padding: 7px;
    border-radius: 7px;
}
.footer-phone{
  font-size: 26px;
  margin-bottom: 14px;
}
.footer-bom{
      width: 1200px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0 auto;
    span{
          color: #f2f2f2;
    font-size: 12px;
    margin-right: 22px;
    }
    a{
          font-size: 12px;
    color: #f2f2f2;
    text-decoration: none;
    img{
      height: 12px;
    vertical-align: middle;
    }
    }

}
</style>